<template>
	<view class="page">
		<wd-navbar title="我的喜欢" fixed placeholder left-arrow safeAreaInsetTop custom-class="nav" :bordered="false" @click-left="handleClickLeft"></wd-navbar>
		<view class="wallpaper_list">
			<view class="wallpaper_item" v-for="item in state.list" :key="item.url">
				<view class="fall-video" v-if="item.association != 'null' && item.association">
					<wd-icon color="#fff" name="play-circle-filled" size="22px"></wd-icon>
				</view>
				<image @click="toRouter('/pages/preview/index',`name=${item.name}&url=${item.url}&association=${item.association}&category=${item.category}`)" style="width: 100%;" mode="widthFix" :src="item.url"></image>
				<view class="mask_info_box d-flex">
					<wd-img width="15" height="13" src='/static/assets/my/heart.png'></wd-img>
					<text  style="margin-left: 10rpx;">{{item.likes}}</text>
				</view>
			</view>
		</view>
		<view v-if="state.list.length == 0">
			<wd-status-tip image="content" tip="暂无内容" />
		</view>
	</view>
</template>

<script setup>
import { toRouter } from "@/hooks/utils";
import { reactive, onMounted } from 'vue';

const state = reactive({
	list: []})
const handleClickLeft = function handleClickLeft() {
  uni.navigateBack()
}

onMounted(() => {
	
	if( uni.getStorageSync('wpa_username') ) {
		uni.request({
			url: '/api/wallpaper/like/list?username=' + uni.getStorageSync('wpa_username'),
			method: 'GET',
			success: (res) => {
				state.list = res.data
			}
		})
	}
})

</script>

<style lang="scss" scoped>
:deep(.nav) {
	background: rgb(245, 245, 245) url("http://124.223.41.167:8080/mobile/static/images/bg.png") no-repeat top left/100% auto;
}
.page {
	position: relative;
	&:before {
		content: '';
		position: fixed;
		left: 0;
		top: 0;
		width: 100vw;
		height: 100vh;
		background: rgb(245, 245, 245) url("http://124.223.41.167:8080/mobile/static/images/bg.png") no-repeat top left/100%;
		z-index: -1;
	}
}
.wallpaper_list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 15px;
	padding: 40rpx;
	.wallpaper_item {
		position: relative;
		overflow: hidden;
		font-size: 0;
		border-radius: 12px;
		.mask_info_box {
			position: absolute;
			left: 0;
			bottom: 0;
			right: 0;
			background: rgba(0,0,0,.4);
			color: #fff;
			padding: 20rpx;
			box-sizing: border-box;
			font-size: 32rpx;
		}
	}
}
.fall-video{
  position: absolute;
  z-index: 99;
  top: 5px;
  right: 5px;
}
</style>
